<template>
    <div class="lw-checkbox">
        <label>
            <input hidden type="checkbox" :checked="checked" @change="$emit('update:checked',$event.target.checked)">
            <span class="iconfont">√</span>
            <i class="content">{{label}}</i>
        </label>
    </div>
</template>

<script>
    export default {
        name:"LwCheckBox",
        props: {  // 接收属性
            checked: {
                type: Boolean,
                default: false,
            },
            label: {
                type: String,
                default: "",
            }
        },
        emits:["update:checked"],  // 接收自定义事件
        data() {
            return {

            }
        },
        mounted(){
            this.checked
            this.label
        }
    }
</script>

<style lang="scss" scoped>
    .lw-checkbox {
        user-select: none;
        display: inline-block;
    }

    .lw-checkbox label span {
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        border-radius: 2px;
        border: 1px solid #757575;
        color: #fff;
        text-align: center;
        line-height: 20px;

    }

    .lw-checkbox label span:hover {
        color: #757575;
    }

    /* 当checkbox处于选中状态 span的样式 */
    .lw-checkbox label input[type='checkbox']:checked+span {
        background-color: #ff6700;
        border-color: #ff6700;
        color: #fff;
    }

    .content {
        font-style: normal;
    }
</style>